$(function () {
    //基础数据中时间切换监听器
    document.getElementById("base-time-type").addEventListener("statistics-time",function (evt) {
        //时间回调
        queryOrderBaseCountList(evt.detail.type,evt.detail.startTime,evt.detail.endTime);
    });
    //运营概况中时间切换监听器
    document.getElementById("op-time-type").addEventListener("statistics-time",function (evt) {
        //二、运营概况
        queryOperationOverviewBaseCountList(evt.detail.type,evt.detail.startTime,evt.detail.endTime);
    });
    //初始化基础数据中的时间筛选
    initTimeType("base-time-type");
    //初始化运营概况中的时间筛选
    initTimeType("op-time-type");

    initTime("baseStat","baseEnd",'base-time-type');
    //初始化时间控件
    initTime("opStart","opEnd",'op-time-type');

    //一、基础数据
    //交易数据，默认查询当天
    queryOrderBaseCountList(2,null,null);
    //二、运营概况
    setTimeout(function () {
        queryOperationOverviewBaseCountList(2,null,null);
    },600);

    //=====================基础数据统计=======================================

    /**
     * 获取交易数据统计
     * @param type 时间类型，1=今日实时，2=近7天（不包含当天），3=近30天（不包含当天），4=自定义（只可选当天之前的时间，且时间跨度不超过12月）
     * @param startTime 开始时间
     * @param endTime 结果时间
     */
    function queryOrderBaseCountList(type,startTime,endTime) {
        $.ajax({
            url: baseloaction + '/admin/stat/queryOrderBaseCountList',
            type:'post',
            dataType:'json',
            beforeSend:function(XH){
                $("#base-stat-loading-box").removeClass("hide");
                return true;
            },
            data:{
                'type':type,
                'startTime':startTime,
                'endTime':endTime
            },
            success:function (result) {
                if(result.success==true){
                    initOrderCountECharts(result);
                    //2、注册用户数据统计，默认查询当天
                    queryUserBaseCountList(type,startTime,endTime);
                }
            }
        });
    }


    /**
     * 获取用户统计数据
     * @param type 时间类型，1=今日实时，2=近7天（不包含当天），3=近30天（不包含当天），4=自定义（只可选当天之前的时间，且时间跨度不超过12月）
     * @param startTime 开始时间
     * @param endTime 结果时间
     */
    function queryUserBaseCountList(type,startTime,endTime) {
        setTimeout(function () {
            $.ajax({
                url: baseloaction + '/admin/stat/queryUserBaseCountList',
                type:'post',
                dataType:'json',
                data:{
                    'type':type,
                    'startTime':startTime,
                    'endTime':endTime
                },
                success:function (result) {
                    if(result.success==true){
                        initRegCountECharts(result)
                    }
                    $("#base-stat-loading-box").addClass("hide");
                }
            });
        },400);
    }

    /**
     * 初始化交易统计数据ECharts
     * @param result 返回结果
     * @param type 时间类型，1=今日实时，2=近7天（不包含当天），3=近30天（不包含当天），4=自定义（只可选当天之前的时间，且时间跨度不超过12月）
     */
    function initOrderCountECharts(result) {
        //付款金额
        var payAmount = result.payAmount;
        if(payAmount <= 0){
            $("#pay-amount>#amount").text('--');
        }else{
            if(payAmount > 9999){
                var _payAmount = parseFloat(payAmount) / parseFloat(10000);
                $("#pay-amount>#amount").text(_payAmount.toFixed(2));
                $("#pay-amount>#company").removeClass('hide');
            }else{
                $("#pay-amount>#amount").text(payAmount);
                $("#pay-amount>#company").addClass('hide');
            }
        }
        //付款订单量
        var payOrderCount = result.payOrderCount;
        if(payOrderCount <=0){
            $("#pay-order-count").text('--');
        }else{
            $("#pay-order-count").text(payOrderCount);
        }
        //下单人数
        var orderUserCount = result.orderUserCount;
        if(orderUserCount <=0){
            $("#order-user-count").text('--');
        }else{
            $("#order-user-count").text(orderUserCount);
        }
        //付费转化率(%)
        var payConversionRate = result.payConversionRate;
        if(payConversionRate <= 0){
            $("#pay-conversion-rate").text('--');
        }else{
            $("#pay-conversion-rate").text(payConversionRate);
        }

        //访客数
        var visitorCount = result.visitorCount;
        if(visitorCount <= 0){
            $("#visitor-count").text("--");
        }else{
            $("#visitor-count").text(visitorCount);
        }
        //===============下面是图形数据初始化显示==================
        var dataList = result.entity;
        var xList = new Array();
        var orderCountList = new Array();
        $.each(dataList,function (index,data) {
            orderCountList.push(data.orderCount);
            if(result.type==1){//当天
                xList.push(data.countTime.split(":")[0]);
            }else{//历史数据
                xList.push(data.countTime.split(" ")[0]);
            }
        });
        var regEChart = echarts.init(document.getElementById("order-statistic-box"));

         var    colors ="#1890ff";
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                color: [colors],
                data: ['订单统计图'],
            },
            grid: {
                top: 'middle',
                left: '3%',
                right: '4%',
                bottom: '3%',
                height: '80%',
                containLabel: true
            },

            xAxis: {
                type: 'category',
                data: xList,
                axisLine: {
                    lineStyle: {
                        color: "#333"
                    }
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#DDD'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#333"
                    },
                    onZero: false,
                },
                axisTick: {
                    alignWithLabel: true
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '订单量 '+(params.seriesData.length ? '：' + params.seriesData[0].data : '') +"单";
                        }
                    }
                },
                nameTextStyle: {
                    color: "#999"
                },
                splitArea: {
                    show: false
                }
            },
            series: [
                {
                    name:'订单量',
                    type: 'line',
                    data: orderCountList,
                    color: colors,
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: {
                                type: 'line',

                                colorStops: [{
                                    offset: 1,
                                    color: colors // 0% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors,
                            borderWidth: 7,
                            borderColor:colors
                        }
                    },
                    smooth: true
                }
            ]
        };
        regEChart.setOption(option);
        $(window).resize(regEChart.resize);
    }

    /**
     * 初始化注册统计数据ECharts
     * @param result 返回结果
     * @param type 时间类型，1=今日实时，2=近7天（不包含当天），3=近30天（不包含当天），4=自定义（只可选当天之前的时间，且时间跨度不超过12月）
     */
    function initRegCountECharts(result) {
        var dataList = result.entity;

        var regCount = result.regCount;
        if(regCount <= 0){//注册人数
            $("#reg-count").text('--');
        }else{
            $("#reg-count").text(regCount);
        }

        var regRate = result.regRate;
        if(regRate <=0){//注册率
            $("#reg-rate").text('--');
        }else{
            $("#reg-rate").text(regRate+'%');
        }
        var activityRate = result.activityRate;
        if(activityRate <=0){//活跃率
            $("#ua-rate").text('--');
        }else{
            $("#ua-rate").text(activityRate+'%');
        }
        //===============下面是图形数据初始化显示==================
        var xList = new Array();
        var regCountList = new Array();
        $.each(dataList,function (index,data) {
            regCountList.push(data.regCount);
            if(result.type==1){//当天
                xList.push(data.countTime.split(":")[0]);
            }else{//历史数据
                xList.push(data.countTime.split(" ")[0]);
            }
        });
        var regEChart = echarts.init(document.getElementById("reg-statistic-box"));

        var    colors ="#2fc25b";
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                color: [colors],
                data: ['注册统计图'],
            },
            grid: {
                top: 'middle',
                left: '3%',
                right: '4%',
                bottom: '3%',
                height: '80%',
                containLabel: true
            },

            xAxis: {
                type: 'category',
                data: xList,
                axisLine: {
                    lineStyle: {
                        color: "#999"
                    },
                    onZero: false,
                },
                axisTick: {
                    alignWithLabel: true
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '注册人数  ' + params.value
                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '') +"人";
                        }
                    }
                }
            },
            yAxis: {
                type: 'value',

                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#DDD'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#333"
                    },
                    onZero: false,
                },
                axisTick: {
                    alignWithLabel: true
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '注册人数 '+(params.seriesData.length ? '：' + params.seriesData[0].data : '') +"人";
                        }
                    }
                },
                nameTextStyle: {
                    color: "#999"
                },
                splitArea: {
                    show: false
                }
            },
            series: [
                {
                    name:'注册人数',
                    type: 'line',
                    data: regCountList,
                    color: colors,
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: {
                                type: 'linear',

                                colorStops: [{
                                    offset: 1,
                                    color: colors // 0% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors,
                            borderWidth: 7,
                            borderColor:colors
                        }
                    },
                    smooth: true
                }
            ]
        };

        regEChart.setOption(option);
        $(window).resize(regEChart.resize);
    }


    //=====================运营概况数据统计=======================================
    /**
     * 运营概况数据统计
     * @param type 时间类型，1=今日实时，2=近7天（不包含当天），3=近30天（不包含当天），4=自定义（只可选当天之前的时间，且时间跨度不超过12月）
     * @param startTime 开始时间
     * @param endTime 结果时间
     */
    function queryOperationOverviewBaseCountList(type,startTime,endTime) {
        $.ajax({
            url: baseloaction + '/admin/stat/queryOperationOverviewBaseCountList',
            type:'post',
            dataType:'json',
            beforeSend:function(XH){
                $("#op-stat-loading-box").removeClass("hide");
                return true;
            },
            data:{
                'type':type,
                'startTime':startTime,
                'endTime':endTime
            },
            success:function (result) {
                if(result.success==true){
                    initOperationOverviewECharts(result);
                    setTimeout(function () {
                        $("#op-stat-loading-box").addClass("hide");
                    },300);
                }
            }
        });
    }

    /**
     * 运营概况数据统计图初始化
     * @param result 返回结果
     */
    function initOperationOverviewECharts(result) {
        //付款金额
        var payAmount = result.payAmount;
        if(payAmount <= 0){
            $("#op-pay-amount").text('--');
        }else{
            $("#op-pay-amount").text(payAmount);
        }
        //付款订单量
        var payOrderCount = result.payOrderCount;
        if(payOrderCount <=0){
            $("#op-pay-order-count").text('--');
        }else{
            $("#op-pay-order-count").text(payOrderCount);
        }
        //下单人数
        var orderUserCount = result.orderUserCount;
        if(orderUserCount <=0){
            $("#op-order-user-count").text('--');
        }else{
            $("#op-order-user-count").text(orderUserCount);
        }

        //访客数
        var visitorCount = result.visitorCount;
        if(visitorCount <= 0){
            $("#op-uv").text("--");
        }else{
            $("#op-uv").text(visitorCount);
        }

        //付款人数
        var payUserCount = result.payUserCount;
        if(payUserCount <= 0){
            $("#pay-user-count").text("--");
        }else{
            $("#pay-user-count").text(payUserCount);
        }

        //下单笔数
        var orderCount = result.orderCount;
        if(orderCount <= 0){
            $("#op-order-count").text("--");
        }else{
            $("#op-order-count").text(orderCount);
        }
        //下单金额
        var orderAmount = result.orderAmount;
        if(orderAmount <= 0){
            $("#op-order-amount").text("--");
        }else{
            $("#op-order-amount").text(orderAmount);
        }

        //客单价
        var averageAmount = result.averageAmount;
        if(averageAmount <= 0){
            $("#op-average-amount").text("--");
        }else{
            $("#op-average-amount").text(averageAmount);
        }

        //下单转化率
        var orderRate = result.orderRate;
        if(orderRate <= 0){
            $(".transaction-state-num-1").text("--");
        }else{
            if(parseFloat(orderRate) > 100){
                orderRate = 100;
            }
            $(".transaction-state-num-1").text(orderRate+'%');
        }
        //付款转化率
        var payRate = result.payRate;
        if(payRate <= 0){
            $(".transaction-state-num-3").text("--");
        }else{
            if(parseFloat(payRate) > 100){
                payRate = 100;
            }
            $(".transaction-state-num-3").text(payRate+'%');
        }
        //平台转化率
        var userPayRate = result.userPayRate;
        if(userPayRate <= 0){
            $(".transaction-state-num-2").text("--");
        }else{
            if(parseFloat(userPayRate) > 100){
                userPayRate = 100;
            }
            $(".transaction-state-num-2").text(userPayRate+'%');
        }
        //====================================
        var dataList = result.entity;
        var xList = new Array();
        var uvCountList = new Array();
        var orderUserCountList = new Array();
        var payUserCountList = new Array();
        var payAmountList = new Array();
        var averageAmountList = new Array();
        $.each(dataList,function (index,data) {
            uvCountList.push(data.visitorCount);
            orderUserCountList.push(data.orderUserCount);
            payUserCountList.push(data.payUserCount);
            payAmountList.push(data.payAmount);
            averageAmountList.push(data.averageAmount);
            if(result.type==1){//当天
                xList.push(data.countTime.split(":")[0]);
            }else{//历史数据
                xList.push(data.countTime.split(" ")[0]);
            }
        });
        var opEChart = echarts.init(document.getElementById("op-statistic-box"));
       var color =[
            "#1890ff",
            "#2fc25b",
            "#fbd44b",
            "#f4667c",
            "#47D8BE"
        ];
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                color:color ,
                data:['访客数','下单人数','付款人数','付款金额','客单价']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xList
            },
            yAxis: {
                type: 'value'
            },
            series: [

                {
                    name:'访客数',
                    type: 'line',
                    data: uvCountList,
                    color: color[0],
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: {
                                type: 'linear',

                                colorStops: [{
                                    offset: 1,
                                    color: color[0] // 0% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color[0],
                            borderWidth: 7,
                            borderColor:color[0]
                        }
                    },
                    smooth: true
                },
                {
                    name:'下单人数',
                    type: 'line',
                    data: orderUserCountList
                    ,color: color[1],
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: {
                                type: 'linear',

                                colorStops: [{
                                    offset: 1,
                                    color: color[1] // 0% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color[1],
                            borderWidth: 7,
                            borderColor:color[1]
                        }
                    },
                    smooth: true

                },
                {
                    name:'付款人数',
                    type:'line',
                    data:payUserCountList
                    ,color: color[2],
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: {
                                type: 'linear',

                                colorStops: [{
                                    offset: 1,
                                    color:  color[2] // 0% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color[2],
                            borderWidth: 7,
                            borderColor:color[2]
                        }
                    },
                    smooth: true
                },
                {
                    name:'付款金额',
                    type:'line',
                    data:payAmountList
                    ,color: color[3],
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: {
                                type: 'linear',

                                colorStops: [{
                                    offset: 1,
                                    color: color[3] // 0% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color[3],
                            borderWidth: 7,
                            borderColor:color[3]
                        }
                    },
                    smooth: true
                },
                {
                    name:'客单价',
                    type:'line',
                    data:averageAmountList
                    ,color: color[4],
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: {
                                type: 'linear',

                                colorStops: [{
                                    offset: 1,
                                    color: color[4] // 0% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color[4],
                            borderWidth: 7,
                            borderColor:color[4]
                        }
                    },
                    smooth: true
                }
            ]
        };
        opEChart.setOption(option);
        $(window).resize(opEChart.resize);
    }
});